<template>
  <div style="width: 100%;height: 100vh;background-color: #2c3e50;overflow: hidden">
    <div style="width: 400px;margin: 150px auto">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input prefix-icon="UserFilled" v-model="form.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="Key" v-model="form.password" placeholder="请输入密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="Key" v-model="password2" placeholder="请确认密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input prefix-icon="Phone" v-model="form.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input style="width: 70%" prefix-icon="Grid" v-model="testify" placeholder="请输入验证码"></el-input>
          <el-button style="min-width: 30%" type="primary" plain>获取验证码</el-button>
        </el-form-item>
        <el-form-item>
          <div style="margin: 0 auto;width: 100%">
            <el-button style="width: 45%;margin-left: 3%" type="primary" @click="$router.push('/login')">前往登录</el-button>
            <el-button style="width: 45%" type="success" @click="register">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Register",
  components: {},
  data() {
    return {
      isActive: true,
      form: {},
      password2:"",
      testify:""
    }
  },
  created() {
  },
  methods: {
    register(){
      if(this.form.username === ""||this.form.password === ""||this.form.phone === ""||this.password2 === "" ||this.testify===""){
        this.$message({
          type:"error",
          message:"存在必填项未填写"
        })
      }else if(this.form.password !== this.password2 ){
        this.$message({
          type:"error",
          message:"两次输入的密码不一致"
        })
        this.password2=""
      }else{
        request.post('/login/register',this.form).then(res=>{
          console.log(res)
          if(res.code === '0'){
            this.$message({
              type:"success",
              message:"注册成功，请前往登录"
            })
          }else{
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }


    }
  },
}
</script>

<style scoped>

</style>